<template>
    <footer class="footer" v-show="list.length>0">
        <span class="todo-count">
          <strong>{{num}}</strong> {{num | numFilter}} left
        </span>
        <ul class="filters">
          <li>
            <router-link to="/all" class="all" :class="{'selected':status=='all'}">All</router-link>
          </li>
          <li>
            <router-link  to="/active" class="active"  :class="{'selected':status=='active'}"
              >Active</router-link
            >
          </li>
          <li>
            <router-link 
              class="completed"
			   :class="{'selected':status=='completed'}"
			    to="/completed"
              >Completed</router-link
            >
          </li>
        </ul>
        <p
          class="clear-completed" @click="removeComplete" v-show="list.length>num">
          Clear completed
        </p>
      </footer>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
	computed:{
		...mapState(['list','status']),
		num(){
			return this.list.filter(item=>!item.finished).length
		}
	},
	filters:{
		numFilter(value){
			return value==1?'item':'items'
		}
	},
	methods:{
		...mapActions(['changeStatus','removeComplete'])
	},
	watch:{
		$route:{
			handler(value){
				if(value.params.id){
					this.changeStatus(value.params.id)
				}else{
					this.changeStatus('all')
				}
				
			},
			immediate:true
		}
	}
}
</script>
<style lang="scss" scoped>
    .footer {
	color: #777;
	padding: 10px 15px;
	height: 20px;
	text-align: center;
	border-top: 1px solid #e6e6e6;
}

.footer:before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50px;
	overflow: hidden;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
	            0 8px 0 -3px #f6f6f6,
	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
	            0 16px 0 -6px #f6f6f6,
	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
	float: left;
	text-align: left;
}

.todo-count strong {
	font-weight: 300;
}

.filters {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	right: 0;
	left: 0;
}

.filters li {
	display: inline;
}

.filters li a {
	color: inherit;
	margin: 3px;
	padding: 3px 7px;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 3px;
}

.filters li a:hover {
	border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
	border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
	float: right;
	position: relative;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
}

.clear-completed:hover {
	text-decoration: underline;
}
</style>